<!DOCTYPE html>
<html lang="zh-CN" class="h-full">
<head>
    <meta charset="UTF-8">
    <!-- 使页面在移动设备上适配屏幕宽度，并设置初始缩放比例为 1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身不可能三角</title>
        <!-- 引入 Tailwind CSS 框架，用于快速构建样式 -->
    <script src="https://cdn.tailwindcss.com/3.4.1"></script>
    <style>
        /* 自定义样式：开关按钮的动画效果 */
        .toggle-btn {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .toggle-thumb {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
    </style>
</head>
    <!-- 页面主体，设置背景颜色（浅色模式为白色，深色模式为黑色） -->
<body class="h-full bg-gray-50 dark:bg-dark-900">
    <!--min-h-screen: 最小高度为视口高度（全屏高度）
        flex: 启用 Flexbox 布局
        items-center: 在交叉轴（垂直方向）居中对齐
        justify-center: 在主轴（水平方向）居中对齐
        p-4: 设置内边距为 1rem（16px）-->
    <div class="min-h-screen flex items-center justify-center p-4">
        <!--w-full: 宽度占满父容器
            max-w-sm: 最大宽度为 20rem（320px）
            bg-white: 背景颜色为白色（浅色模式）
            dark:bg-gray-800: 背景颜色为深灰（深色模式）
            rounded-xl: 圆角较大
            shadow-lg: 添加较大的阴影效果
            p-6: 内边距为 1.5rem（24px）
            space-y-6: 子元素之间的垂直间距为 1.5rem-->
        <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 space-y-6">
            <!-- 标题 -->
            <div class="flex justify-between items-center">
                <!--text-xl: 字体大小为 1.25rem（20px）
                    font-bold: 加粗字体
                    text-gray-800: 文字颜色为深灰（浅色模式）
                    dark:text-gray-200: 文字颜色为浅灰（深色模式）-->
                <h1 class="text-xl font-bold text-gray-800 dark:text-gray-200">健身不可能三角</h1>
            </div>

            <div class="space-y-4">
                <!-- 开关项容器，子元素之间有 1rem 的垂直间距，三个开关项保持相同结构，这里只解释第一个 -->
                <div class="switch-item">
                    <!--flex: 启用 Flexbox 布局
                        items-center: 垂直居中对齐
                        justify-between: 水平两端对齐
                        p-4: 内边距为 1rem
                        rounded-lg: 较大的圆角-->
                    <div class="flex items-center justify-between p-4 rounded-lg">
                        <span class="text-gray-800 dark:text-gray-200">肌肉很大</span>
                        <!-- 开关按钮 -->
                        <button
                            data-index="0"
                            class="toggle-btn w-12 h-6 rounded-full relative bg-gray-200 dark:bg-gray-600"
                        >
                            <!-- 开关滑块 -->
                            <div class="toggle-thumb absolute top-1 left-1 w-4 h-4 rounded-full bg-white"></div>
                        </button>
                    </div>
                </div>
                <div class="switch-item">
                    <div class="flex items-center justify-between p-4 rounded-lg">
                        <span class="text-gray-800 dark:text-gray-200">体脂很低</span>
                        <button
                            data-index="1"
                            class="toggle-btn w-12 h-6 rounded-full relative bg-gray-200 dark:bg-gray-600"
                        >
                            <div class="toggle-thumb absolute top-1 left-1 w-4 h-4 rounded-full bg-white"></div>
                        </button>
                    </div>
                </div>
                <div class="switch-item">
                    <div class="flex items-center justify-between p-4 rounded-lg">
                        <span class="text-gray-800 dark:text-gray-200">脑袋不尖</span>
                        <button
                            data-index="2"
                            class="toggle-btn w-12 h-6 rounded-full relative bg-gray-200 dark:bg-gray-600"
                        >
                            <div class="toggle-thumb absolute top-1 left-1 w-4 h-4 rounded-full bg-white"></div>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 当 DOM 加载完成后执行以下代码
            const activeSwitches = new Set();// 用于存储当前激活的开关索引
            const toggleButtons = document.querySelectorAll('.toggle-btn'); // 获取所有开关按钮
            const themeToggle = document.getElementById('themeToggle');// 获取主题切换按钮
            
            // 处理开关点击事件
            function handleToggle(index) {
                const button = toggleButtons[index];// 获取当前点击的开关按钮
                const isActive = button.classList.contains('bg-blue-500');// 判断开关是否已激活
                // 如果开关未激活
                if (!isActive) {
                    // 如果已有两个开关激活，则随机关闭一个
                    if (activeSwitches.size >= 2) {
                        const activeArray = [...activeSwitches];// 将 Set 转换为数组
                        const randomIndex = Math.floor(Math.random() * activeArray.length);// 随机选择一个索引
                        const random = activeArray[randomIndex];
                        activeSwitches.delete(random);// 从激活集合中移除
                        toggleButtons[random].classList.remove('bg-blue-500');// 移除激活样式
                        toggleButtons[random].querySelector('.toggle-thumb').style.transform = 'translateX(0)';// 滑块复位
                    }
                    activeSwitches.add(index);// 将当前开关加入激活集合
                    button.classList.add('bg-blue-500');// 添加激活样式
                    button.querySelector('.toggle-thumb').style.transform = 'translateX(24px)';// 滑块移动到右侧
                // 如果开关已激活
                } else {
                    activeSwitches.delete(index);// 从激活集合中移除
                    button.classList.remove('bg-blue-500');// 移除激活样式
                    button.querySelector('.toggle-thumb').style.transform = 'translateX(0)';// 滑块复位
                }
            }
            // 为每个开关按钮绑定点击事件
            toggleButtons.forEach((btn, index) => {
                btn.addEventListener('click', () => handleToggle(index));
            });
        });
    </script>
</body>
</html>